<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>手术室预约详情</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
  <style>
    /* 这段样式只是用于演示 */
    /* #LAY-component-grid-list .demo-list .layui-card {
      height: 500px;
    } */
  </style>
</head>

<body>
  <div class="layui-fluid" id="LAY-component-grid-list">
    <div class="layui-row layui-col-space10 demo-list">
      <div class="layui-col-sm12 layui-col-md12 layui-col-lg12">
        <!-- 具体某个手术室的预约详情 -->
        <div class="layui-card">
          <div class="layui-card-header">查询</div>
          <div class="layui-card-body" id="search-view">
            <!-- 填充查询模板 -->
          </div>
        </div>
        <div class="layui-card">
          <div class="layui-card-header">预约信息</div>
          <div class="layui-card-body">
            <!-- 预约信息的表格 -->
            <table id="bookings-table" lay-filter="bookingsTable">
            </table>
          </div>
        </div>
      </div>

    </div>
  </div>

  <script src="../../layuiadmin/layui/layui.js" charset="utf-8"></script>
  <!-- <script src="../../../js/axios.min.js"></script>
  <script src="../../../js/vue.js"></script> -->


  <!-- 查询表单开始 -->
  <script id="demo" type="text/html">
    <form class="layui-form" action="" id="searchForm">
      <div class="layui-inline" id="surgeryrooms">
        <div class="layui-form-item">
          <label class="layui-form-label">选择手术室</label>
          <div class="layui-input-inline">
            <select name="surgeryRoomId" lay-filter="surgeryRoomId">
              <option value="">请选择手术室</option>
              {{#  layui.each(d.data, function(index, item){ }}
              <option value="{{item.surgeryRoomId}}">{{item.surgeryRoomName}}</option>
              {{#  }); }}
            </select>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">预约人</label>
            <div class="layui-input-inline">
              <input type="text" name="empId" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">患者</label>
            <div class="layui-input-inline">
              <input type="text" name="inpatientName" autocomplete="off" class="layui-input">
            </div>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">预约时间</label>
            <div class="layui-input-inline">
              <input type="text" name="bookingTime" autocomplete="off" class="layui-input" id="booking-time">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">预约状态</label>
            <div class="layui-input-inline">
              <select name="situation" lay-filter="situation">
                <option value="">预约状态</option>
                <option value="0">取消</option>
                <option value="1">未执行</option>
                <option value="2">执行中</option>
                <option value="3">执行完成</option>
                <option value="4">过期</option>
              </select>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label"></label>
              <div class="layui-input-inline">
                <button type="submit" class="layui-btn layui-icon layui-icon-search" lay-submit=""
                  lay-filter="search">查询</button>
                <button type="reset" class="layui-btn layui-btn-warm layui-icon layui-icon-refresh">重置</button>
              </div>
            </div>
          </div>
    </form>
  </script>
  <!-- 手术室模板结束 -->
  <!-- 手术室模板开始 -->
  <script id="surgery" type="text/html">
    <label class="layui-form-label">选择手术室</label>
    <div class="layui-input-inline">
      <select name="surgeryRoomId" lay-filter="surgeryRoomId">
        <option value="">请选择手术室</option>
        {{#  layui.each(d.data, function(index, item){ }}
        <option value="{{item.surgeryRoomId}}">{{item.surgeryRoomName}}</option>
        {{#  }); }}
      </select>
    </div>
  </script>
  <!-- 手术室模板结束 -->
  <!-- 表格工具条开始 -->
  <div id="table-toolbar" style="display: none" lay-filter="tableToolbar">
    <button type="submit" class="layui-btn layui-icon layui-icon-add-1" lay-event="addBooking">添加</button>
    <!-- <button type="reset" class="layui-btn layui-btn-primary" lay-event="batchDelete">批量删除</button> -->
  </div>
  <!-- 表格工具条结束 -->
  <!-- 行工具开始 -->
  <script type="text/html" id="row-bar">
    <a class="layui-btn layui-btn-xs layui-icon layui-icon-edit" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-icon layui-icon-edit" lay-event="generateSurgeryConfirmFile">生成手术同意书</a>
    <a class="layui-btn layui-btn-xs layui-icon layui-icon-edit" lay-event="changeSituation">更改状态</a>
  </script>
  <!-- <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> -->
  <!-- 行工具结束 -->

  <!-- 添加修改 弹出层开始 -->
  <div style="display: none;" id="addOrEditDiv">
    <form id="dataForm" lay-filter="dataForm" class="layui-form" style="padding: 20px" action="">
      <input type="hidden" name="bookingId">
      <div class="layui-form-item" id="chooseSurgeryRoom">

      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">预约人Id</label>
          <div class="layui-input-inline">
            <input type="text" name="empId" autocomplete="off" class="layui-input" lay-verify="required">
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">患者Id</label>
          <div class="layui-input-inline">
            <input type="text" name="inpatientId" autocomplete="off" class="layui-input" lay-verify="required">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">患者姓名</label>
          <div class="layui-input-inline">
            <input type="text" name="inpatientName" autocomplete="off" class="layui-input" lay-verify="required">
          </div>
        </div>
      </div>

      <div class="layui-form-item">

        <label class="layui-form-label">预定开始时间</label>
        <div class="layui-input-block">
          <input type="text" name="bookingStartTime" autocomplete="off" class="layui-input" lay-verify="required"
            placeholder="" id="bookingStartTime">
        </div>

      </div>
      <div class="layui-form-item">

        <label class="layui-form-label">预约结束时间</label>
        <div class="layui-input-block">
          <input type="text" name="bookingEndTime" autocomplete="off" class="layui-input" lay-verify="required"
            placeholder="" id="bookingEndTime">
        </div>

      </div>
      <div class="layui-form-item">
        <div class="layui-block">
          <label class="layui-form-label">备注</label>
          <div class="layui-input-block">
            <textarea name="note" placeholder="请输入内容" class="layui-textarea"></textarea>
          </div>
        </div>
      </div>
      <div class="layui-form-item" align="center">
        <div class="layui-input-block">
          <button class="layui-btn layui-btn-sm layui-icon layui-icon-release" type="submit" lay-filter="doSubmit"
            lay-submit="">保存</button>
          <button class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh " type="reset">重置</button>
        </div>
      </div>
    </form>
  </div>
  <!-- 弹出层结束 -->
  <!-- 生成手术同意书的弹出层开始 -->
  <div style="display: none;" id="generateSurgeryConfirmLayer">
    <form class="layui-form" action="/surgeryconfirm/generate" lay-filter="generateSurgeryConfirm">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">患者姓名</label>
          <div class="layui-input-inline">
            <input class="layui-input" type="text" name="inpatientName" lay-verify="required" value="">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">性别</label>
          <div class="layui-input-block">
            <input class="layui-input" type="text" name="patientGender" lay-verify="required" value="">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">年龄</label>
          <div class="layui-input-block">
            <input class="layui-input" type="text" name="patientAge" lay-verify="required" value="">
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">科室名称</label>
          <div class="layui-input-inline">
            <input class="layui-input" type="text" name="depName" lay-verify="required" value="">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">病床号</label>
          <div class="layui-input-inline">
            <input class="layui-input" type="text" name="bedId" lay-verify="required" value="">
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-block">
          <label class="layui-form-label">术前诊断</label>
          <div class="layui-input-block">
            <textarea name="preoperativeDiagnosis" placeholder="请输入内容" lay-verify="required" class="layui-textarea"></textarea>
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-block">
          <label class="layui-form-label">手术名</label>
          <div class="layui-input-block">
            <input class="layui-input" type="text" name="operationName" lay-verify="required" value="">
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-block">
          <label class="layui-form-label">麻醉方式</label>
          <div class="layui-input-block">
            <input class="layui-input" type="text" name="anesthesia" lay-verify="required" value="">
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-block">
          <label class="layui-form-label">预定时间</label>
          <div class="layui-input-block">
            <input class="layui-input" type="text" name="bookingStartTime" lay-verify="required" value="">
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button type="submit" class="layui-btn layui-btn-sm layui-icon layui-icon-release" lay-submit=""
            lay-filter="generateConfrim">提交</button>
          <button type="reset" class="layui-btn  layui-btn-sm layui-icon layui-icon-refresh layui-btn-warm">重置</button>
        </div>
      </div>
    </form>
  </div>
  <!-- 生成手术同意书的弹出层结束 -->
  <!-- 修改预约的状态弹出层开始 -->
  <div style="display: none;" id="changeSituationLayer">
    <form id="changeSituation" lay-filter="changeSituation" class="layui-form" style="padding: 20px" action="">
      <div class="layui-form-item">
        <div class="layui-block">
          <label class="layui-form-label">预定编号</label>
          <div class="layui-input-block">
            <input class="layui-input" type="text" name="bookingId" readonly value="">
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-block">
          <label class="layui-form-label">患者Id</label>
          <div class="layui-input-block">
            <input type="text" name="inpatientId" autocomplete="off" class="layui-input" readonly lay-verify="required">
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-block">
          <label class="layui-form-label">手术室Id</label>
          <div class="layui-input-block">
            <input type="text" name="surgeryRoomId" autocomplete="off" class="layui-input" readonly
              lay-verify="required">
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">预约状态</label>
          <div class="layui-input-inline">
            <select name="situation" >
              <option value="">预约状态</option>
              <option value="0">取消</option>
              <option value="1">未执行</option>
              <option value="2">执行中</option>
              <option value="3">执行完成</option>
              <option value="4">过期</option>
            </select>
          </div>
        </div>
      </div>
      

      <div class="layui-form-item">
        <div class="layui-input-block" align="right">
          <button type="submit" class="layui-btn layui-btn-sm layui-icon layui-icon-release" lay-submit=""
            lay-filter="changeSituationBtn">提交</button>
          <button type="reset" class="layui-btn  layui-btn-sm layui-icon layui-icon-refresh layui-btn-warm">重置</button>
        </div>
      </div>
    </form>
  </div>
  <!-- 修改预约的状态弹出层结束 -->

  <script>
    layui.config({
      base: '../../layuiadmin/' //静态资源所在路径
    }).extend({
      index: 'lib/index' //主入口模块
    }).use(['laytpl', 'jquery', 'form', 'element', 'laypage', 'table', 'layer', 'laydate'], function () {
      var laytpl = layui.laytpl;
      var $ = layui.$;
      var form = layui.form;
      var element = layui.element;
      var laypage = layui.laypage;
      var table = layui.table;
      var layer = layui.layer;
      var laydate = layui.laydate;
      var data;
      $.post("/surgeryroom/rooms", null, function (resp) {
        console.log(resp);
        if (resp.state == 200) {
          console.log(resp.state)
          // 模板渲染
          data = resp
          var getTpl = demo.innerHTML,
            view = document.getElementById('search-view');
          laytpl(getTpl).render(data, function (html) {
            view.innerHTML = html;
          });
          getTpl = surgery.innerHTML,
            view = document.getElementById('chooseSurgeryRoom');
          laytpl(getTpl).render(data, function (html) {
            view.innerHTML = html;
          });
          // element.render()
          form.render()
        }

      });
      /* form.on('select(surgeryRoomId)', function(data) {
      	alert(data.value);
      			
      }); */
      // 时间选择器
      laydate.render({
        elem: "#booking-time",
        type: "datetime"
      })
      laydate.render({
        elem: "#bookingEndTime",
        type: "datetime"
      })
      laydate.render({
        elem: "#bookingStartTime",
        type: "datetime"
      })
      // 表格渲染
      var tableIns = table.render({
        elem: "#bookings-table",
        url: "/surgeryBooking/all",
        method: "post",
        contentType: 'application/json',
        defaultToolbar: [],
        toolbar: "#table-toolbar",
        area: '800px',
        page: true,
        even: true,
        cols: [
          [ // 表头
            {
              type: 'checkbox',
              fixed: 'left'
            }, {
              field: 'bookingId',
              title: 'ID',
              width: 80,
              sort: true,
            }, {
              field: 'surgeryRoomId',
              hide: true
            }, {
              field: 'inpatientId',
              hide: true
            }, {
              field: 'surgeryRoomId',
              title: '手术室',
              width: 60
            }, {
              field: 'inpatientName',
              title: '病人姓名',
              width: 100,
              sort: true
            }, {
              field: 'empId',
              title: '预约人Id',
              width: 100
            }, 
            /* {
              title: '预约人姓名',
              width: 100,
              templet: function (d) {
                return d.emp.empName;
              }
            }, */ 
            {
              field: 'bookingTime',
              title: '预约时间',
              width: 200,
              sort: true
            }, {
              field: 'bookingStartTime',
              title: '预定开始时间',
              width: 200,
              sort: true
            }, {
              field: 'bookingEndTime',
              title: '预定结束时间',
              width: 200,
              sort: true
            }, {
              field: 'situation',
              title: '预约状态',
              width: 80,
              sort: true,
              templet: function (d) {
                if (d.situation == '0') {
                  return ' 取消'
                } else if (d.situation == '1') {
                  return '未执行'
                } else if (d.situation == '2') {
                  return '执行中'
                } else if (d.situation == '3') {
                  return '执行完成'
                } else {
                  return '过期'
                }
              }
            }, {
              field: 'note',
              title: '备注',
              width: 80
            }, {
              toolbar: "#row-bar",
              title: '操作',
              width: 300
            }
          ]
        ]
      })
      /* 监听头部工具栏时间 */
      table.on("toolbar(bookingsTable)", function (obj) {
        switch (obj.event) {
          case "addBooking":
            layer.msg("添加")
            openAdd()
            break;
          case "batchDelete":
            layer.msg("批量删除")
            batchDelete()
            break;
        }
      })
      // 添加或者修改的url
      var addOrEditUrl;
      // 弹出层的索引
      var mainIndex;
      /* 打开添加页面 */
      function openAdd() {
        mainIndex = layer.open({
          type: 1,
          title: '添加预约信息',
          content: $("#addOrEditDiv"),
          area: ['800px'],
          success: function (index) {
            $("#dataForm")[0].reset();
            addOrEditUrl = "/surgeryBooking/add";
          }
        });
      }
      /* 批量删除 */
      function batchDelete() {

      }

      // 行中工具条事件
      table.on('tool(bookingsTable)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

        if (layEvent === 'del') { //删除
          layer.confirm('真的删除行么', function (index) {
            obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
            layer.close(index);
            //向服务端发送删除指令
            openDelete(data)
          });
        } else if (layEvent === 'edit') { //编辑
          openEdit(data);
        } else if (layEvent === 'generateSurgeryConfirmFile') { //生成手术同意书
          openGenerateSurgeryConfirmFile(data);
        } else if (layEvent === 'changeSituation') {
          openChangeSituation(data);
        }

      });
      /* 删除，更改为过期的信息  */
      /* function openDelete(data){
        	$.ajax({
				url:addOrEditUrl,
				contentType:'application/json;charset=utf-8',
				type:"post",
				data:JSON.stringify(data.field),
				success:function(res){
					layer.msg("success")
				}
			});
        } */
      /* 打开修改页面 */
      function openEdit(data) {
        console.log(data)
        mainIndex = layer.open({
          type: 1,
          title: '修改预约信息',
          content: $("#addOrEditDiv"),
          area: ['800px'],
          success: function (index) {
            form.val("dataForm", data);
            addOrEditUrl = "/surgeryBooking/update";
          }
        });
      }
      //触发更新或者新增弹出层的更新或者添加按钮
      form.on("submit(doSubmit)", function (data) {

        var params = $("#addOrEditDiv form").serialize()
        /* $.get(addOrEditUrl, params, function (data) {
          		layer.msg("success")
          		//关闭弹出层
          		layer.close(mainIndex);
          		// 刷新页面
          		location.reload();
        	}) */
        $.ajax({
          url: addOrEditUrl,
          contentType: 'application/json;charset=utf-8',
          type: "post",
          data: JSON.stringify(data.field),
          success: function (res) {
            layer.alert(res.msg)
            //console.log(data)
            //关闭弹出层
            layer.close(mainIndex);
            tableIns.reload()
          }
        });
        return false;
      });
      /* 打开手术生成同意书弹出层,生成手术同意书是同步请求 */
      function openGenerateSurgeryConfirmFile(data) {
        layer.msg("生成手术同意书")
        mainIndex = layer.open({
          type: 1,
          title: '手术同意书信息',
          content: $("#generateSurgeryConfirmLayer"),
          area: ['800px'],
          success: function (index) {
            form.val("generateSurgeryConfirm", data);
            addOrEditUrl = "/surgeryconfirm/generate";
          }
        })
      }
      /* 打开修改状态的弹出层 */
      function openChangeSituation(data) {
        layer.msg("修改状态")
        mainIndex = layer.open({
          type: 1,
          title: '修改手术状态',
          content: $("#changeSituationLayer"),
          area: ['800px', '560px'],
          success: function (index) {
            form.val("changeSituation", data);
            addOrEditUrl = "/surgeryBooking/updateStuation";
          }
        })

      }
      // 触发修改状态弹出层的提交按钮
      form.on("submit(changeSituationBtn)", function (data) {
    	console.log("提交的",data)
        $.ajax({
          url: addOrEditUrl,
          contentType: 'application/json;charset=utf-8',
          type: "post",
          data: JSON.stringify(data.field),
          success: function (res) {
            layer.msg(res.msg)
            //关闭弹出层
            layer.close(mainIndex);
            tableIns.reload()
          }
        });
        return false;
      });
      // 条件查询
      form.on('submit(search)', function (data) {
        //alert(data.data)
        console.log(data.field)
        // 表格数据重载
        tableIns.reload({
          where: data.field
        })
        return false;
      })

    })
  </script>
</body>

</html>